<!-- 订单管理-所有订单 -->
<template>
    <div>
        <el-card style="max-width: 100%;">
            <search-box :tableDataInput="tableData" :searchField="'number'" @search="handleSearch1"></search-box>
            <el-table :data="selectedItems" style="margin-top: 16px;" :row-style="{ height: '80px' }"
                :header-cell-style="{ background: '#EBEEF2' }">
                <el-table-column prop="id" width="150px" style="text-align: left;" label="订单编号" />
                <el-table-column label="商品信息" width="150">
                    <template slot-scope="scope">
                        <el-tree :data="scope.row.sortTree" :props="defaultProps" node-key="label"
                            @node-click="handleNodeClick(scope.row, $event)" @node-expand="open(scope.$index, scope.row)"
                            @node-collapse="close(scope.$index, scope.row)">
                            <template v-slot="{ node, data }"> <!-- 使用 v-slot 而不是 slot-scope -->
                                <div class="tree-node-note" :class="{
                                    'parent-node': !node.isLeaf,
                                    'child-node': node.isLeaf
                                }">
                                    <div>
                                        <img v-if="!node.isLeaf" :src="node.expanded ? collapsedIcon : expandedIcon"
                                            class="fa-folder" />
                                        {{ node.label }}
                                    </div>
                                    <p style=" font-size: 10px; margin-left: 5px; color: rgba(167, 180, 204, 1);">{{
                                        data.note }}</p>
                                </div>
                            </template>
                        </el-tree>
                    </template>
                </el-table-column>
                <el-table-column width="160px" align="center" label="下单时间">
                    <template slot-scope="scope">
                        <div class="li_div">
                            {{ scope.row.createTime }}
                        </div>
                        <div v-if="scope.row.nodeStatus != 'father'">
                            <div class=" tree-node-note li_div" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" width="80" label="订单金额">
                    <template slot-scope="scope">
                        <div class="tree-node-note-center">
                           ¥{{ scope.row.orderAmount }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class="tree-node-note-center" v-for="(item, index) in scope.row.countList" :key="index">
                                ¥{{ item }}
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="收货人名称">
                    <template slot-scope="scope">
                        <div class="tree-node-note-center">
                            {{ scope.row.receiverName }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class="tree-node-note-center" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column min-width="100" :show-overflow-tooltip="true" label="收货地址">
                    <template slot-scope="scope">
                        <div class="tree-node-note">
                            {{ scope.row.receiverDetailAddress }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class="tree-node-note" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="联系电话" min-width="150" align="center">
                    <template slot-scope="scope">
                        <div class="tree-node-note">
                            {{ scope.row.receiverPhone }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class=" tree-node-note" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="订单状态">
                    <template slot-scope="scope">
                        <div v-if="scope.row.orderStatus == 1">待付款</div>
                        <div v-if="scope.row.orderStatus == 2">待发货</div>
                        <div v-if="scope.row.orderStatus == 3">已发货</div>
                        <div v-if="scope.row.orderStatus == 4">已取消</div>
                        <div v-if="scope.row.orderStatus == 5">已退款</div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class="tree-node-note-center" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="完成时间">
                    <template slot-scope="scope">
                        <div class=" tree-node-note">
                            {{ scope.row.complete_date }}
                        </div>
                        <div v-show="scope.row.nodeStatus != 'father'">
                            <div class=" tree-node-note" v-for="(item, index) in scope.row.countList" :key="index" />
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="100px"  align="center">
                    <template slot-scope="scope">
                    <div class="con_div" @click="showOrderDetails(scope.row)">
                        <img class="con_div_img" src="../../assets/order/订单.png" alt="订单图标" />
                        <span class="con_div_span">订单详情</span>
                    </div>
                </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-pagination background layout="->,prev, pager,next,total" :page-size="10" :total="tableDataLength"
            @current-change="handleCurrentChange" style="margin-top: 20px;">
        </el-pagination>

        <ToBeShippedOrderDetail
            style="width: 100%;height: 31.25rem;overflow-y: auto;"
            v-if="TBSOrderdialogVisible"
            :time.sync="createTime"
            :data.sync="TBSdata"
            :dialogVisible1.sync="TBSOrderdialogVisible"
            @closeDialog="TBShandleClose">
        </ToBeShippedOrderDetail>

        <ShippedOrderDetail
            style="width: 100%;height: 31.25rem;overflow-y: auto;"
            v-if="ShippedOrderdialogVisible"
            :data.sync="currentRowData"
            :time.sync="createTime"
            :dialogVisible="ShippedOrderdialogVisible"
            @closeDialog="ShippedOrderhandleClose">
        </ShippedOrderDetail>
    </div>
</template>

<script>
import { getAllOrders,getToBeShippedOrderDetail,getShippedOrderDetail } from '@/api/api';
import ToBeShippedOrderDetail from "../../views/order/components/ToBeShippedOrderDetail.vue";
import ShippedOrderDetail from "../order/components/ShippedOrderDetail.vue";
export default {
    components:{
        ToBeShippedOrderDetail,
        ShippedOrderDetail
    },
    data() {
        return {
            tableDataLength: 0,
            expandedIcon: require("@/assets/order/加.png"),
            collapsedIcon: require("@/assets/order/减.png"),
            selectedItems: [], // 列表信息
            expandedNodes: [], // 存储已展开节点的 ID
            tableData: "",   // 查询框信息
            allorderdetail: {
                name: '',
                pageNo: 1,
                orderStatus: null,
            },
            defaultProps: {
                children: 'children',
                label: 'label'
            },
            TBSOrderdialogVisible: false, 
            TBSdata: [],
            ShippedOrderdialogVisible: false,
            currentRowData: null, // 用于存储当前行的数据
            createTime: "",
        }
    },
    async created() {
        return this.getAllOrderList(this.allorderdetail);
    },
    methods: {
        getdatatransfortree(data) {
            for (let i = 0; i < data.length; i++) {
                const sortTree = [{
                    label: data[i].orderTitle,
                    children: []
                }];
                this.$set(data[i],'nodeStatus','father')
                const countList = [];
                data[i].listProductOrderInfos.forEach(info => {
                    // 解析 spData JSON 字符串  
                    const spDataParsed = JSON.parse(info.spData);
                    const note = spDataParsed.find(item => item.value) ? spDataParsed.find(item => item.value).value : ''; // 查找第一个非空 value  

                    countList.push(info.commodityPrice);

                    // 添加到 children 数组  
                    sortTree[0].children.push({
                        label: info.commodityName,
                        payNumber: info.payNumber,
                        note: note // 如果 note 为空，则不会添加到子对象中  
                    });
                });

                // 返回构建好的 sortTree  
                data[i].sortTree = sortTree;
                data[i].countList = countList
            }
            return data;

        },
        async getAllOrderList(data) {
            try {
                const res = await getAllOrders(data);
                if (res.data.code == 200) {
                    this.selectedItems = res.data.result.records;
                    this.getdatatransfortree(this.selectedItems);
                    this.tableData = res.data.result.records;
                    this.tableDataLength = res.data.result.total;
                }
            } catch (error) {
                console.log(error);
            }
        },
        handleCurrentChange(val) {
            this.allorderdetail.pageNo = val;
            this.getAllOrderList(this.allorderdetail);
        },
        handleSearch1(name) {
            this.allorderdetail.name = name;
            this.getAllOrderList(this.allorderdetail);
            this.allorderdetail.pageNo = 1;
        },
        handleNodeClick(data) {
            console.log(data);
        },
        open(index, row) { 
            console.log("节点打开");
            row.nodeStatus = 'child'
        },
        close(index, row) {  
            console.log("节点关闭");
            row.nodeStatus = 'father'
        },
        handleSearch(index, row) {
            console.log(index);
            console.log(row);
            this.$message({
                message: "订单详情",
                type: "warning",
            });
        },
        showOrderDetails(row){
            switch(row.orderStatus){
                case 2:
                    this.openTBSdialog(row)
                    return
                case 3:
                    this.openSOdialog(row);
                    return
                case 4:
                    console.log('已完成')
                    return
                default:
                    console.log('不做操作')
                    return
            }
        },
        async openTBSdialog(row){
            this.createTime = row.createTime;
            const res = await getToBeShippedOrderDetail(row.id);
            if (res.data.code == 200) {
                console.log("打印订单详情");
                console.log(res.data.result);
                this.TBSdata = res.data.result;
                this.TBSOrderdialogVisible = true;
            } else {
                this.$message.error("获取订单详情失败");
            }
        },
        TBShandleClose(){
            this.TBSOrderdialogVisible = false;
        },
        async openSOdialog(row){
            this.createTime = row.createTime;
            try {
                const res = await getShippedOrderDetail(row.id);
                if (res.data.code == 200) {
                    const data = res.data.result;
                if (data != null) {
                    this.currentRowData = await data;
                    this.ShippedOrderdialogVisible = true;
                } else {
                    if (data != null) {
                        this.currentRowData = await data;
                        this.ShippedOrderdialogVisible = true;
                    } else {
                        this.$message.error("订单内容不存在");
                    }
                }
                }
            } catch (error) {
                console.log(error);
            }
        },
        ShippedOrderhandleClose(){
            this.ShippedOrderdialogVisible = false;
        }
    },
}
</script>

<style scoped>
.input1 {
    font-size: 16px;
    width: 241px;
    opacity: 1;
    border-radius: 80px;
    background: rgb(153, 155, 158);
}

.input1>>>input.el-input__inner {
    background: rgba(235, 238, 242, 1);
    border-radius: 20px;
}

/* img {
    width: 16px;
    height: 16px;
    margin: 5px 5px 0 0;
} */

.con_div {
    width: 100px;
    /* background-color: aqua; */
    
}

.con_div_span {
    /* display: inline-block; */
    font-size: 14px;
    margin: 0;
}

.children_div {
    margin-top: 50px
}

.tree-node-note {
    display: flex;
    flex-direction: column;
    /* align-items: flex-start; */
    /* 默认对齐方式，与 label 对齐 */
    justify-content: center;
    /* 垂直居中子元素 */
    color: rgba(52, 69, 99, 1);
    font-size: 14px;
    height: 35px;
    /* border: 1px solid black; */
    line-height: 15.6px;
    /* margin-left: 20px; */
}

.tree-node-note-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 默认对齐方式，与 label 对齐 */
    justify-content: center;
    /* 垂直居中子元素 */
    color: rgba(52, 69, 99, 1);
    font-size: 14px;
    height: 35px;
    line-height: 15.6px;
}

.tree-node-note.parent-node {
    /* margin-left: 30px; */
    width: 100%;
    /* background-color: aqua; */
    margin-left: 0;

}

.tree-node-note.child-node {
    /* margin-left: 30px; */
    width: 100%;
    /* background-color: aqua; */
    margin-left: 10px;
}

.tree-node-note .fa-folder {
    /* 与文本之间添加一些间距 */
    /* 其他图标样式 */
    width: 10px;
    height: 10px;
}

/* 假设你有一个类名来标识需要修改图标的父节点 */
::v-deep .el-tree .el-tree-node__expand-icon {
    /* 隐藏默认的图标 */
    display: none;
}

.con_div{
    /* background-color: bisque; */
    display: flex;
    justify-content: center;
    align-items: center;

}

.con_div_img {
    width: 11.67px;
    height: 13.33px;
    vertical-align: middle;
    margin-right: 5px;
    /* 可以让图片与文本垂直居中 */
}

.con_div_span {
    /* 调整间距，使文本与图片之间有一定的距离 */
    font-size: 12px;
    vertical-align: middle;
    /* 与图片垂直对齐 */
    display: inline-block;
    /* 确保span是内联块元素 */
}

.li_div {
    display: flex;
    flex-direction: column;
    /* width: 150px; */
    align-items: center;
    /* padding-top: 40px; */
    justify-content: center;
    /* 默认对齐方式，与 label 对齐 */
    font-size: 14px;  
}

/* tree节点高度 */
.el-table td.el-table__cell div>>>.el-tree-node__content {
    height: 35px;
    width: 100%;
}

.custom-tree-node {
    display: flex;
    align-items: center;
}

</style>